<template>
	<view class="page">
		<view>
			<tab-view :tab-list="tabList" @doTab="tabChange"></tab-view>
		</view>
		<block v-if="tabIndex === 0">
			<view class="section">
				<input class="padding-default" placeholder="🔍  搜索客户" />
			</view>
			<view class="section margin-bottom-default">
				<view class="flex padding-m ">
					<view class="flex-3">余额
						<span class="debit circle margin-left-xl padding-right-xs padding-left-xs">借</span>
					</view>
					<view>8000</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="section">
				<input class="padding-default" placeholder="🔍  搜索供应商" />
			</view>
			<view class="section margin-bottom-default">
				<view class="flex padding-m ">
					<view class="flex-3">余额
						<span class="total-credit circle margin-left-xl padding-right-xs padding-left-xs">贷</span>
					</view>
					<view>8000</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: [{
					index: 0,
					name: '应收款项'
				}, {
					index: 1,
					name: '应付款项'
				}],
			}
		},
		methods: {

			tabChange(event) {
				this.tabIndex = event.index
			},
		}
	}
</script>

<style>

</style>